<template>
    <div
        class="ps-fixed ps-r-10 ps-t-70 cursor z-index-9"
        @mousemove="cardHidden = true"
        v-if="cardMain"
    >
        <span
            class="icon ps-ab"
            style="right: -2px; top: -5px"
            title="关闭"
            @click="cardMain = false"
            v-if="cardHidden"
            >&#xe601;</span
        >
        <el-card shadow="always">
            <div
                v-for="item in contactList"
                :key="item"
                @click="showContext(item)"
            >
                <div class="d-flex d-flex-column">
                    <span class="icon" v-html="item.icon"></span>
                    <div>{{ item.name }}</div>
                </div>
                <el-divider v-if="item.name !== 'Q群'" />
            </div>
        </el-card>
        <el-card
            v-if="contactName == '客服'"
            class="ps-fixed ps-r-60 ps-t-60 cursor d-flex d-flex-column z-index-9"
            shadow="always"
            ><span class="icon ps-ab ps-t-0 ps-r-5" @click="close" title="关闭"
                >&#xe601;</span
            >
            <div class="textA-c">在线客服</div>
            <img src="@/assets/images/vx.png" alt="" />
            <div class="icon textA-c mt-10">&#xe749; 微信扫码</div>
        </el-card>
        <el-card
            v-if="contactName == 'Q群'"
            class="ps-fixed ps-r-60 ps-t-85 cursor d-flex d-flex-column z-index-9"
            shadow="always"
            ><span class="icon ps-ab ps-t-0 ps-r-5" @click="close" title="关闭"
                >&#xe601;</span
            >
            <div class="pd-10 mt-10">QQ群：257816744</div>
        </el-card>
    </div>
    <div
        class="ps-fixed ps-r-0 ps-t-70 cursor z-index-9"
        @click="cardMain = true"
        v-else
    >
        <span class="icon" title="展开">&#xe602;</span>
    </div>
    <el-dialog
        v-model="centerDialogVisible"
        title="反馈"
        width="30%"
        center
        align-center
    >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            label-position="top"
        >
            <el-form-item
                label="如果朋友或同事请您推荐一款边缘计算系统，您把WisdIOT边缘计算推荐给他们的机会有多少呢?"
                prop="score"
            >
                <el-rate
                    v-model="ruleForm.score"
                    :texts="['很不推荐', '不推荐', '一般', '很好', '非常棒']"
                    show-text
                />
            </el-form-item>
            <el-form-item label="您推荐的原因是" prop="reason">
                <el-checkbox-group v-model="ruleForm.reason">
                    <el-checkbox label="使用简单" name="type" />
                    <el-checkbox label="运行稳定" name="type" />
                    <el-checkbox label="安全性强" name="type" />
                    <el-checkbox label="官方服务好" name="type" />
                    <el-checkbox label="想要的功能都有" name="type" />
                    <el-checkbox label="扩展性较好" name="type" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item
                label="基于您的使用体验，请您简单描述要改善的方面，帮助我们做的更好"
                prop="feedback"
            >
                <el-input type="textarea" v-model="ruleForm.feedback" />
            </el-form-item>
            <el-form-item label="留下您的联系方式" prop="contact ">
                <el-input v-model="ruleForm.contact" />
            </el-form-item>
            <el-form-item class="dflex">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
const contactList = ref([
    {
        icon: '&#xe645;',
        name: '客服',
    },
    {
        icon: '&#xe660;',
        name: '反馈',
    },
    {
        icon: '&#xe699;',
        name: 'Q群',
    },
])
const contactName = ref()
const centerDialogVisible = ref(false)
const ruleFormRef = ref()
const ruleForm = reactive({
    score: '非常棒',
    reason: '',
    feedback: '',
})
const rules = reactive({
    score: [
        {
            required: true,
            message: '请评价',
            trigger: 'blur',
        },
    ],
})
const cardHidden = ref(false)
const cardMain = ref(true)
function showContext(item) {
    contactName.value = item.name
    if (contactName.value == '反馈') {
        centerDialogVisible.value = true
    }
}
function close() {
    contactName.value = ''
}
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 0.04rem !important;
    img {
        width: 100px;
    }
}
:deep(.el-divider--horizontal) {
    margin: 0.05rem 0 !important;
}
:deep(.dflex) {
    .el-form-item__content {
        display: flex;
        justify-content: center;
    }
}
</style>
